<template>
    <div class="navbar-div">
        <el-row>
            <el-col :span="4"></el-col>
            <el-col :span="16">
                <el-col :span="6">
                    <el-image class="logo-image" :src="logoImgUrl"/>
                    <p class="logo-title">旧书馆</p>
                </el-col>
                <el-col :span="4"></el-col>
                <el-col :span="7">
                    <el-menu
                            :default-active="this.$route.path"
                            class="el-menu-demo cus-menu"
                            mode="horizontal"
                            @select="handleSelect"
                            background-color="#fff"
                            text-color="#BEBEBE"
                            active-text-color="#668B8B"
                            router>

                        <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
                            {{item.navItem}}
                        </el-menu-item>
                    </el-menu>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="4">

                    <el-input placeholder="书名/作者" v-model="nameOrAuthor" class="input-with-select search-input"
                              size="mini" type="text" clearable>
                        <el-button slot="append" icon="el-icon-search" size="mini" @click="SearchBook"></el-button>
                    </el-input>

                </el-col>
                <el-col :span="2">
                    <el-button class="login-button" size="mini" round @click="login" v-if="!this.$store.state.isLogin">登陆</el-button>
                    <el-button class="user-button" size="mini" icon="el-icon-user" round @click="toMyCenter" v-if="this.$store.state.isLogin">个人中心</el-button>
                </el-col>
            </el-col>
            <el-col :span="4"></el-col>
        </el-row>
    </div>
</template>

<script>

    import VueEvent from "../../model/VueEvent";
    export default {
        name: "NavBar",
        data() {
            return {
                activeIndex: '1',
                nameOrAuthor: '',
                logoImgUrl: require('../../assets/logo.png'),
                navList: [
                    {name: '/index', navItem: '首页'},
                    {name: '/classify', navItem: '分类'},
                    {name: '/rank', navItem: '排行'},
                ]
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
                console.log("切换路由"+keyPath+"之后的名字"+this.nameOrAuthor);
            },
            login() {
                this.$router.push({name: "login"});
            },
            toMyCenter(){
                this.$router.push({name: "uploadedBook"});
            },
            SearchBook(){
                //若未输入查询参数提示用户
                if(this.nameOrAuthor === ''){
                    this.$message.info("请输入书名或作者名");
                    return;
                }
                //将查询参数存储到state中的navSearchParam属性中
                //this.$store.commit('updateNavSearchParam', this.nameOrAuthor);

                var keyword=this.nameOrAuthor;
                this.$router.push({name: "search", params: {searchParam: this.nameOrAuthor}});
                this.$nextTick(function () {
                    VueEvent.$emit('transmit-keyword',keyword);
                })

                this.nameOrAuthor='';
                console.log("跳转到搜索页面的名字"+this.nameOrAuthor);


            }
        }
    }
</script>

<style scoped="scoped">
    .el-col {
        height: 60px;
    }

    .nav-hr {
        margin: 0;
    }

    .logo-span {
    }

    .navbar-div {
        background-color: #ffffff;
    }

    .cus-menu {
        height: 60px;
        line-height: 60px
    }

    .el-menu--horizontal>.el-menu-item {
        height: 60px;
        line-height: 60px;
    }

    .logo-image {
        float: left;
        height: 40px;
        width: 40px;
        margin: 10px 0;
    }

    .logo-title {
        float: left;
        line-height: 60px;
        margin: 0 10px;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        font-size: 20px;
    }

    .login-button {
        margin: 16px 20px;
        color: #BEBEBE;
    }

    .user-button {
        margin: 16px 5px;
        color: #BEBEBE;
    }

    .search-input {
        margin: 16px 0;
    }


</style>
